<template>
<div>	
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="750px"
	  @close="closeDialog"
	>
	
	<el-table :data="tableData"  style="width: 100%">
		<el-table-column >
		  <template #header>
			<el-input v-model="keywords" size="small" placeholder="检索" @keydown="search" />
		  </template>
		  <template #default="scope">
			  <span>{{scope.row.name}}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="状态"  align="center" width="100">
			<template #header>
				<el-button type="primary" >新增</el-button>
			</template>
		  <template #default="scope">
			  <el-switch
			    :loading="loading.value"
			    v-model="scope.row.status"
			    inline-prompt
			    active-text="是"
			    inactive-text="否"
				active-value="1"
				inactive-value="0"
				@change="change(scope.row)"
			  />
		  </template>
		</el-table-column>
	</el-table>
	
	
	</el-dialog>
</div>
</template>

<script lang="ts" setup>
	import { listForCustomAPI,saveForCustomAPI,deleteForCustomAPI} from "@/api/project"; 
	import { Delete, Edit, Search, Share, Plus } from '@element-plus/icons-vue'
	import {ref } from 'vue'
	/* import type {FormRules } from 'element-plus' */
	
	const tableData=ref([]);
	const keywords=ref('');
	const project=ref({});
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	
	const load=()=>{
		loading.value=true;
		listForCustomAPI({
			name:keywords.value,
			projectId:project.value.id,
		})
		.then(({result}) => {
			 const _data=result
			tableData.value= _data
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const search=(e)=>{
		if(e.keyCode == 13){
			load();
		}
	}
	
	const openDialog=(row:object)=>{
		dialog.value.visible=true;
		dialog.value.title="["+row.name+"]扩展接口";
		project.value=row;
		load();
	}
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		tableData.value=[];
		project.value={};
	}
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style>
</style>